var React = require('react');


var Bheader = require('../widget/Bheader');
var Footer = require('../widget/Footer');
var Xianshi = require('../widget/Xianshi');
var Xinpro = require('../components/XinPro');
var ajax = require('../tools/ajax');


module.exports = React.createClass({
    getInitialState: function () {
        return {
            theme:"Default", //Default/Blue
            goodsInfo:[]
        }
    },
    myScroll:"",

    componentDidMount: function () {
        var shopId = localStorage.getItem("shopId");
        this.getIsNewProinfo(shopId);
        setTimeout(this.swiper,200);
        setTimeout(this.iscroll,500);
    },

    componentDidUpdate() {
        var p=this;
        if(p.myScroll){
            p.myScroll.refresh();
        }
    },

    /**iScroll插件*/
    iscroll(){
        var p =this;
        p.myScroll = new IScroll("#xinpinWrapper",{
            // 默认iscroll会拦截元素的默认事件处理函数，我们需要响应onClick，因此要配置
            preventDefault: false,
            // 禁止缩放
            zoom: false,
            // 支持鼠标事件，因为我开发是PC鼠标模拟的
            mouseWheel: true,
            // 滚动事件的探测灵敏度，1-3，越高越灵敏，兼容性越好，性能越差
            probeType: 3,
            // 拖拽超过上下界后出现弹射动画效果，用于实现下拉/上拉刷新
            bounce: true,
            // 展示滚动条
            scrollbars: false
        });
        p.myScroll.refresh();
        document.addEventListener('touchmove', function(){}, false);
    },

    componentWillUnmount:function(){

    },

    /**新品商品信息*/
    getIsNewProinfo: function (shopId) {
        var p = this;
        ajax("POST","getIsNewProinfo",{shop_id:shopId},function(dt){
            if(dt && dt.success){
                var objs = dt.data;
                var leftTimes = [];
                for(var i=0;i<objs.length;i++){
                    var leftTime = (new Date(objs[i].action_end_time) - new Date())/1000;//计算相差的秒数
                    leftTime = leftTime >0 ? leftTime : 0;
                    leftTimes.push(leftTime);
                }
                p.setState({goodsInfo:objs});
                p.refs.xinPro.setState({
                    proList:objs,
                    leftTimes:leftTimes
                },()=>{
                    for(var i=0;i<p.refs.xinPro.state.leftTimes.length;i++){
                        p.refs.xinPro.leftTimer(p.refs.xinPro.state.leftTimes,i);
                    }
                });
            }
        });
    },

    action:function(e){
        var action = e.currentTarget.getAttribute("action");
        location.href = action;
    },

    swiper(){
        var swiper = new Swiper('.swiper-container', {
            width:window.innerWidth,
            slidesPerView : 2,
            autoplay : 2500,
            loop : true,
            loopAdditionalSlides : 1,

        });
    },
    render: function () {
        var p = this;
        var new_img = localStorage.getItem("new_img");
        var new_scrollimage = localStorage.getItem("new_scrollimage");
        if(new_scrollimage){
            var imgList = new_scrollimage.split(",").map(function(obj,index){
                return(
                    <div key={index} className="swiper-slide">
                        <div className="sPic">
                            <div className="aPic"><img src={obj} /><div className="picCen"></div></div>
                        </div>
                    </div>
                )
            });
        }
        return (
            <div className="main"  id="main">
                <Bheader theme={p.state.theme} title="新品预售"></Bheader>
                <div  id="xinpinWrapper" className="container-t noFooter">
                    <div style={{minHeight:"31.16rem"}}>
                        <div className="head-title">
                            <div className="r-line"></div>
                            <div className="h-title-c">即将开始</div>
                            <div className="r-line"></div>
                        </div>
                        <div className="newProSwiper">
                            <div className="swiper-container">
                                <div className="swiper-wrapper">
                                    {imgList}
                                </div>
                            </div>
                        </div>
                        <div className="xin_banner"  onClick={p.action} action="#newGoodDetail">
                            <img src={new_img}/>
                        </div>
                        <div className="xinp">
                            <Xinpro ref="xinPro"></Xinpro>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
});
